<template>
    <div>
        <h3>{{ msg }}</h3>
        <div>
            <p>
                <span> {{ count }} </span>
            </p>
            <p>
                <button @click="$store.commit('add',10)">+</button>
                <button @click="reduce(2)">-</button>
            </p>
        </div>
    </div>
</template>
<script>
import store from '@/vuex/store'
import { mapState,mapMutations,mapGetters } from 'vuex'

export default {
    name:"Vuex1",
    data(){
        return {
            msg:"getters 过滤计算 状态管理,参数传值"
        }
    },
    store,
    computed:{
        ...mapState(['count']),
        ...mapGetters(['count']),
    },
    methods:{
        ...mapMutations(['add','reduce'])
    }

}
</script>
<style scoped>
    button{
        width:3rem;
        height:1.5rem;
        font-size:1rem;
    }
</style>